<template>
	<div class="login-box-content">
		<div class="login-body-left">
			<img src="../../../static/images/login_circle.jpg" />
		</div>
		<div class="login-body-right">
			<div class="login-title-text">
				云结算管理系统 V2.0
			</div>
			<div class="login-box-content-user">
				<input id="username" @change="change(0)" v-model="username" :placeholder="$t('loginName')" />
				<span class="login-box-content-user-icons" v-show="isUser"></span>
				<span class="login-box-content-delete-icons" @click="deleteText(0)" v-show="!isUser"></span>
			</div>
			<div class="login-box-content-pass">
				<input type="password" @change="change(1)" id="password" v-model="password" :placeholder="$t('password')" />
				<span class="login-box-content-pass-icons" v-show="isPass"></span>
				<span class="login-box-content-delete-icons" @click="deleteText(1)" v-show="!isPass"></span>
			</div>
			<div class="login-verification-code">
				<input @change="change(1)" id="verCode" v-model="password" :placeholder="$t('loginCode')" />
				<span class="login-box-content-pass-icons" v-show="isPass"></span>
				<span class="login-box-content-delete-icons" @click="deleteText(1)" v-show="!isPass"></span>
			</div>
			<div class="login-rememb">
				<div>

				</div>
				<div>
					记住密码
				</div>
			</div>
			<div class="login-btn">
				登录
			</div>
			<div class="login-trademark">
				Copyright © 2017-旅联商务
			</div>
		</div>

		<div class="login-box-content-checked text-right">

		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				username: "",
				password: "",
				checked: false,
				isUser: true,
				isPass: true
			}
		},
		props: ["loginLogo"],
		methods: {
			change(type) {
				if(type === 0) {
					this.username ? this.isUser = false : this.isUser = true;
				} else {
					this.password ? this.isPass = false : this.isPass = true;
				}
			},
			deleteText(type) {
				if(type === 0) {
					this.username = "";
					this.isUser = true;
				} else {
					this.password = "";
					this.isPass = true;
				}
			}
		}
	}
</script>